<template>
  <div class="order-list" v-loading="loading"> 
    <div
      class="order-list-item container"
      v-for="item of orderList"
      :key="item.orderNo"
    >
      <div class="item-header flex-space-bet">
        <div class="left">
          {{ item.createTime }} {{ item.receiverName }} 订单号：{{
            item.orderNo
          }}
          {{ item.paymentTypeDesc }}
          <span class="red" @click="removeOrder(item.orderNo)">取消订单</span>
        </div>
        <div class="price">应付金额：{{ item.payment }}元</div>
      </div>
      <div class="item-section flex-space-bet">
        <div class="item-product">
          <div
            class="product-detail"
            v-for="pro of item.orderItemVoList"
            :key="pro.productId"
            @click="goProduct(pro.productId)"
          >
            <div>
              <img :src="pro.productImage" />
            </div>
            <div class="detail-content">
              <h3>{{ pro.productName }}</h3>
              <p>{{ pro.currentUnitPrice }}元 X {{ pro.quantity }}</p>
            </div>
          </div>
        </div>
        <div class="payment" @click="goPay(item.orderNo)">
          {{ item.statusDesc }}<span class="iconfont">&#xe665;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      loading: true,
      orderList: [],
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    //   获取订单列表
    getOrderList() {
      this.axios.get("/orders").then((res) => {
        let list = res.list;
        let nowList = [];
        for(let i in list){
            if(list[i].statusDesc === '未支付'){
                nowList.push(list[i])
            }
        }
        this.orderList = nowList;
        this.loading = false
      },() => {
        this.loading = false;
      });
    },
    // 查看商品详情
    goProduct(id) {
      this.$router.push(`/index/product/id=${id}`);
    },
    // 去支付
    goPay(id) {
      this.$router.push(`/cart/orderset/${id}`);
    },
    // 取消订单列表
    removeOrder(id) {
      this.loading = true;
      this.axios.put(`/orders/${id}`).then((res) => {
        console.log("取消成功");
        this.getOrderList();
        this.loading = false
      },() => {
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss">
.order-list {
  background: #eee;
  padding: 32px 0;
  .order-list-item {
    margin: 0 auto 32px;
    border: 1px solid rgba(153, 153, 153, 0.2);
    overflow: hidden;
    .item-header {
      width: 1224px;
      height: 74px;
      line-height: 74px;
      background: #fffaf7;
      padding: 0 20px;
      .red {
        margin-left: 20px;
        cursor: pointer;
      }
    }
    .item-section {
      line-height: 146px;
      background: #fff;
      padding: 0 20px;
      font-weight: bold;
      .item-product {
        display: flex;
        flex-direction: column;
        cursor: pointer;
      }
      .product-detail {
        display: flex;
        align-items: center;
        h3,
        p {
          font-size: 20px;
          color: #333333;
          line-height: 30px;
          text-align: left;
        }
        .detail-content {
          margin-left: 40px;
        }
      }
      img {
        width: 69px;
        vertical-align: middle;
      }
      .payment {
        font-size: 20px;
        color: #ff6600;
        cursor: pointer;
      }
    }
  }
}
</style>